<template>
  <div class="yong-config"
    style="--van-nav-bar-background:rgb(0,0,0);--nav-bar-text-color:#ffffff;--van-nav-bar-title-text-color:#ffffff;--van-nav-bar-icon-color:#ffffff;">
    <!-- 顶部安全区和导航栏 -->
    <van-nav-bar v-if="isApp" ref="safeAreaInsetTopRef" safe-area-inset-top />
    <van-nav-bar ref="TitleNavbarRef" title="分佣设置">
      <template #left>
        <van-icon name="arrow-left" size="24" @click="pageBack" />
      </template>
      <template #right>
        <div @click="addGoodsHandle">
          <span style="color: #ffffff;">新增</span>
        </div>
      </template>
    </van-nav-bar>
    <!-- 顶部安全区和导航栏 -->

    <div class="yong-content">
      <van-cell-group style="flex-shrink: 0;">
        <van-field v-model="state.incomeDiscount" name="incomeDiscount" type="number" label="默认留存比" placeholder="请输入默认留存比"
          input-align="right" error-message-align="right" :rules="[{ required: true, message: '请输入默认留存比' }]">
          <template #right-icon>
            <span>‰</span>
          </template>
          <template #button>
            <div class="handle-btn" @click="defConfigHandle">设置</div>
          </template>
        </van-field>
      </van-cell-group>

      <div class="goods-list">
        <div class="goods-item" v-for="item in state.goodsList" :key="item">
          <div class="goods-name">
            <span>{{ item.goodsName }}</span>
          </div>
          <div class="goods-bili">
            <div class="input-item">
              <van-field v-model="item.incomeDiscount" name="incomeDiscount" type="number" label="留存比(千分位)" placeholder="请输入商品留存比"
                input-align="right" error-message-align="right" :rules="[{ required: true, message: '请输入商品留存比' }]">
                <template #right-icon>
                  <span>‰</span>
                </template>
              </van-field>
            </div>
            <div class="handle-btn2" @click="goodsConfig(item)">
              确认
            </div>
          </div>
        </div>
      </div>
    </div>

    <addGoods ref="addGoodsRef" @close="addGoodsClose" />
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import api from './api'
import addGoods from './components/addGoods.vue'

const store = useStore()
const router = useRouter()
const isApp = store.state.isApp

const addGoodsRef = ref(null)

const statusForm = {
  '1': '已上架',
  '0': '已下架'
}

const state = reactive({
  incomeDiscount: null,
  goodsList: []
})

onMounted(() => {
  store.commit("setNavBar", { show: false })
  getDefConfig()
  getGoodsConfig()
})

const pageBack = () => {
  router.go(-1)
}

function getDefConfig() {
  api.incomeConfGet().then(res => {
    if (res.code != '200') {
      showToast(res.msg)
      return
    }
    state.incomeDiscount = res.data.incomeDiscount
  }).catch(err => {
    console.log(err)
  })
}

function getGoodsConfig() {
  api.goodsDefaultGet().then(res => {
    if (res.code != '200') {
      showToast(res.msg)
      return
    }
    state.goodsList = res.data?.list || []
  }).catch(err => {
    console.log(err)
  })
}

const defConfigHandle = () => {
  const { incomeDiscount } = state
  if (incomeDiscount !== 0 && !incomeDiscount) {
    showToast('请输入默认留存比')
    return
  }
  api.incomeConfSet({ incomeDiscount }).then(res => {
    showToast(res.msg)
  }).catch(err => {
    console.log(err)
  })
}

const goodsConfig = (data) => {
  const { goodsId, incomeDiscount } = data
  if (incomeDiscount !== 0 && !incomeDiscount) {
    showToast('请输入商品留存比')
    return
  }
  api.goodsDefaultSet({
    goodsId,
    incomeDiscount,
  }).then(res => {
    showToast(res.msg)
  }).catch(err => {
    console.log(err)
  })
}

const addGoodsHandle = () => {
  addGoodsRef.value.dialogShow()
}

const addGoodsClose = () => {
  getGoodsConfig()
}

</script>

<style lang="scss" scoped>
.yong-config {
  height: 100%;
  padding-top: 0 !important;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  .yong-content {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-flow: column;
    .add-goods-btn {
      text-align: center;
      font-size: 14px;
      box-sizing: border-box;
      padding: 8px 0;
      margin-top: 15px;
      color: #ffffff;
      background: #265efe;
      border-radius: 7px;
    }
    .goods-list {
      flex-grow: 1;
      overflow: hidden;
      overflow-y: auto;
      margin-top: 15px;
      .goods-item {
        border-radius: 7px;
        overflow: hidden;
        background: #ffffff;
        box-sizing: border-box;
        &:not(:first-of-type) {
          margin-top: 15px;
        }
        .goods-name {
          text-align: center;
          font-size: 14px;
          background: #457ef2;
          color: #ffffff;
          box-sizing: border-box;
          padding: 10px 0;
        }
        .goods-bili {
          box-sizing: border-box;
          padding: 15px;
          .input-item {
            --van-cell-background: #f3f3f3;
          }
        }
      }
    }
  }
}

.handle-btn {
  color: #ffffff;
  background: #265efe;
  font-size: 12px;
  box-sizing: border-box;
  padding: 2px 15px;
  border-radius: 20px;
  text-align: center;
}
.handle-btn2 {
  width: 50%;
  margin-left: 25%;
  color: #ffffff;
  background: #265efe;
  font-size: 12px;
  box-sizing: border-box;
  padding: 8px 0;
  border-radius: 20px;
  text-align: center;
  margin-top: 15px;
}
</style>